<template>
	<view class="container" :style="{height: `${windowHeight}px`, padding: '8px'}">
		<view class="card">
			<up-cell-group :border="false">
				<up-cell title="退出登陆" :border="false" isLink @click="handleLogout"></up-cell>
			</up-cell-group>
		</view>
	</view>
	
	<up-modal :show="modalShow" title="系统提示" content='确定注销并退出系统吗？' showCancelButton asyncClose @confirm="confirmLogout"
		@close="closeModal" @cancel="closeModal" @cancelOnAsync="closeModal"></up-modal>
</template>

<script lang="ts" setup>
	import { useUserStore, useAppStore } from '@/store';
	import { ref } from 'vue';
	import {pages} from '@/utils/page-url';

	const userStore = useUserStore();
	const appStore = useAppStore();

	const modalShow = ref<boolean>(false);
	const confirmFlag = ref<boolean>(false);

	const windowHeight = () => {
		return uni.getSystemInfoSync().windowHeight;
	}

	const handleLogout = () => {
		modalShow.value = true;
	}
	
	const closeModal = () => {
		if (!confirmFlag.value) {
			modalShow.value = false;
		}
	}
	
	const confirmLogout = async () => {
		confirmFlag.value = true;
		try {
			await userStore.logout();
			if (appStore.loginAuth) {

				uni.reLaunch({
					url: pages.login
				});
			} else {
				uni.navigateBack();
			}
		} finally {
			confirmFlag.value = false;
		}
	}
</script>

<style lang="scss">
	.card {
		background-color: #fff;
		/* 设置阴影 */
		box-shadow: 0 0 6px #e3e3e3;
		border-radius: 10px;
		border: 1px solid rgba(255, 255, 255, 0.5);
	}
</style>